<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        #outer{
            width: 300px;
            height: 300px;
            border:10px solid red;
            /* 内填充 */
            /* padding-left: 30px;
            padding-top: 80px; */

            /* 了解一下 */
            padding: 50px;
            /* padding: 50px 100px; */
            /* padding: 50px 80px 100px; */

            /* css3 */
            /* 容器div的整个宽度就是设置的width */
            box-sizing: border-box;

            /* margin-bottom: 50px; */

            float: left;
        }

        .c1{
            width: 300px;
            height: 300px;
            border:10px solid green;
            /* margin-top:50px; */
            float: left;
            margin-left: 50px;
        }

    </style>
</head>
<body>
    <!-- margin - 外边距,margin-left  margin-top margin-bottom margin-right -->
    <!-- border 边框 -->
    <!-- padding 内填充 -->
    <div id="outer">
        content
    </div>

    <div class="c1">

    </div>
</body>
</html>